<template>
	<view class="btg h100vh flex column">
		<image src="../../static/bgmain.png" mode="" class="img320"></image>
		<view class="f18 fw tit">
			我的
		</view>
		<view class="ma">
			<view class="flex a-center pl40">
				<image :src="userInfo.avatar?userInfo.avatar:'../../static/tx.png'" mode="" class="img60"
					@click="goto('/pages/main/login/login')"></image>
				<view class="f1 ml20">
					<view class="fw f16">
						{{userInfo.real_name?userInfo.real_name:'点击头像登录'}}

					</view>
					<view class="f14 co--7676 mt20">
						{{userInfo.mobile?userInfo.mobile:'登录体验更多服务'}}
					</view>
				</view>
				<view class="flex a-center ba-zhu p20 wsxx" @click="goto('/pages/main/information')">
					<view class="f12 color--fff">
						完善信息
					</view>
					<image src="../../static/right.svg" mode="" class="img14 ml10"></image>
				</view>
			</view>
		</view>
		<view class="fuwu p20 bag--fff">
			<view class="ba-zhu br--20 p30">
				<view class=" f16 color--fff fw">
					我的服务
				</view>
				<view class="flex ju--between a-center mt30">
					<view class="flex a-center" @click="goto('/pages/main/service')">
						<image src="../../static/fa.png" mode="" class="img28 br50"></image>
						<view class="f14 color--fff ml20">
							发布服务
						</view>
					</view>
					<view class="flex a-center" @click="goto('/pages/main/manage')">
						<image src="../../static/fu.png" mode="" class="img28 br50"></image>
						<view class="f14 color--fff ml20">
							服务管理
						</view>
					</view>
				</view>
			</view>
			<view class="flex ju--around a-center mt50 mb20">
				<view class="center" @click="goto('/pages/main/information')">
					<image src="../../static/ziliao.png" mode="" class="img24"></image>
					<view class="f14 co--7676 mt20">
						我的资料
					</view>
				</view>
				<view class="center" @click="goto('/pages/main/service')">
					<image src="../../static/ruzhu.png" mode="" class="img24"></image>
					<view class="f14 co--7676 mt20">
						服务入驻
					</view>
				</view>
				<view class="center" @click="goto('/pages/main/main')">
					<image src="../../static/kefu.png" mode="" class="img24"></image>
					<view class="f14 co--7676 mt20">
						联系客服
					</view>
				</view>
			</view>
		</view>
		<view class="pt30 pl50 pb30 bag--fff mt20" @click="show=true">
			<view class="fw f16">
				我的零工
			</view>
			<view class="flex a-center mt30">
				<image src="../../static/+fa.png" mode="" class="img28"></image>
				<view class="f14 co--7676 ml20">
					发布零工
				</view>
			</view>
		</view>
		<view class="bag--fff f1  mt20 p30">
			<u-button>退出登录</u-button>
		</view>
		<my-popup :show="show" confirmText='关闭' @confirm="show=false" @cancel="show=false">暂未开放！请联系平台客服</my-popup>
		<bottom :visible.sync="popupVisible"></bottom>
		<Tabbar :current-page="4" @open-modal="popupVisible = true" />
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				popupVisible: false, // 用于控制弹窗显示
				show: false,

			}
		},
		computed: {
			...mapState({
				userInfo: state => state.userinfo
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-button {
		height: 80rpx !important;
		border-radius: 40rpx !important;
		background: #f5f5f5 !important;
		color: #999 !important;
		font-size: 28rpx;
		margin-top: 270rpx !important;
	}

	.img320 {
		width: 100%;
		height: 640rpx;
	}

	.tit {
		position: absolute;
		top: 110rpx;
		left: 50%;
		transform: translate(-50%);
	}

	.ma {
		position: absolute;
		top: 208rpx;
		left: 0;
		width: 100%;
	}

	.fuwu {
		margin-top: -250rpx;
		border-radius: 40rpx 40rpx 0 0;
	}

	.wsxx {
		border-radius: 46rpx 0 0 46rpx;
	}
</style>